<template>
  <!-- 实验室报告 -->
  <section>
    <el-tabs v-if="tableList.length >0" v-model="tabName" type="border-card">
      <el-tab-pane v-for="(item,index) in tableList" :key="index" :name="'t'+index">
        <template v-slot:label>
          <div class="title-report overflow-omit">{{item.itemName}}</div>
        </template>
        <h3 style="text-align:center;margin:0;">{{item.itemName}}</h3>
        <br>
        <table style="width:100%;border:0;">
          <tr>
            <td>开单医生：{{item.reqDocno}}</td>
            <td>开单时间：{{item.sendDate}}</td>
            <td>报告时间：{{item.checkDate}}</td>
            <td>报告人：{{item.reportMan}}</td>
          </tr>
        </table>
        <br>
        <labReportDetail :queryId="item.queryId"></labReportDetail>
      </el-tab-pane>
    </el-tabs>
    <div v-if="tableList.length == 0" style="color:#999;padding:10px 0;text-align:center;">
      <i class="iconfont iconwushuju" style="font-size:40px;"></i>
      <div>暂无数据</div>
    </div>
  </section>
</template>
<script>
export default {
  props: ["cureId"],
  components: {
    labReportDetail: () => import("./labReportDetail.vue")
  },
  data() {
    return {
      tabName: "t0",
      tableList: []
    };
  },
  mounted() {
    const th = this;
    th.getData();
  },
  methods: {
    getData() {
      const th = this;
      let j = {
        cureId: th.cureId
      };
      th.$api.findCheckListByCure(j).then(res => {
        if (res.executed) {
          th.tableList = res.data || [];
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.title-report {
  display: inline-block;
  max-width: 200px;
}
</style>